<template>
  <div class="room-list">
    <div class="room-list-tree">
      <el-tree @current-change="currentChange" :data="state.treeData" :props="defaultProps"
               :expand-on-click-node="false" default-expand-all/>
    </div>
    <div class="room-list-right">
      <div class="room-search">
        <div class="room-from">
          <DynamicForm
              ref="dynamicFormRef"
              type="search"
              :rulesForm="rulesForm"
              @click="callBack"
          />
        </div>
        <div class="room-button">
          <el-button type="primary" @click="add">新增</el-button>
        </div>
      </div>
      <div class="room-table">
        <DynamicTable
            ref="dynamicTableRef"
            :columns="columns"
            :data="state.data"
            :table="state.table"
            @click="callBack"
        >
          <template #form-advanceAfter>
          <span>
            <a-button class="ml-50px mr-10px" type="primary" size="small" @click="add"
            >新增</a-button
            >
            <a-radio-group v-model:value="dataViewMode" button-style="solid" size="small">
              <a-radio-button value="table">
                <FundFilled/>
              </a-radio-button>
              <a-radio-button value="card">
                <DashOutlined/>
              </a-radio-button>
            </a-radio-group>
          </span>
          </template>
        </DynamicTable>
      </div>
    </div>
    <DynamicDialog ref="dynamicDialogRef" @click="callBack" :button="{confirm:false,cancel:false}"
                   :dialogVisible="state.visible"
                   title="绑定设备" width="50%">
      <template #dialog>
        <Relation ref="relationRef" @click="callBack" v-if="state.visible" :row="state.row"/>
      </template>
    </DynamicDialog>
  </div>
</template>

<script lang="ts" setup>

import {ref, watch, onMounted, reactive} from 'vue';
import {useRouter} from 'vue-router';
import {listBmsConstPageApi, listFindByBmsConstVoApi} from '@/api/room/index';
import DynamicTable from '@/components/layout/table/dynamic-table.vue';
import DynamicForm from '@/components/layout/form/dynamic-form.vue';
import DynamicDialog from '@/components/layout/dialog/dynamic-dialog.vue';
import Relation from '../relation/Index.vue';

import {roomColumns} from "@/assets/script/monitor/columns/rooms";
import {roomForms} from "@/assets/script/monitor/forms/room/list-search-form";

const dynamicTableRef = ref(DynamicTable)
const dynamicFormRef = ref(DynamicForm)
const dynamicDialogRef = ref(DynamicDialog)
const relationRef = ref(Relation)

const columns = roomColumns
const rulesForm = roomForms
//数据显示模式    table | cards
const dataViewMode = ref('table');
const showTable = ref(true);
const router = useRouter();

const defaultProps = {
  children: 'children',
  label: 'constName',
  id: 'constCode'
}

//列表接口参数
let state = reactive({
  dictionaryCode: '',
  parentCode: '',
  data: [] as any,
  row: {} as any,
  table: {
    total: 0,
    pageSize: 15,
    pageIndex: 1
  },
  visible: false,
  searchData: {} as any,
  treeData: [{constName: '楼栋', constCode: 'storey'}]
});

watch(
    () => dataViewMode.value,
    (v) => {
      if (v === 'card') {
        showTable.value = false;
      } else {
        showTable.value = true;
      }
    },
);
//跳转新增页面
const add = () => {
  router.push({path: '/room/add-room'});
};
//树形结构数据
const expandedKeys = ref([]);
const selectedKeys = ref([]);
// 初始加载
onMounted(async () => {
  listFindByBmsConstVo();
  listBmsConstPage()
});
let flg = true;

const callBack = (data: any) => {
  switch (data.type || '') {
    case 'dialogClose':
      state.visible = false
      break
    case 'submit':
      state.searchData = data.data
      listBmsConstPage(state.searchData)
      break
    case 'rest':
      state.searchData = {}
      state.table.pageIndex = 0
      state.table.pageSize = 15
      listBmsConstPage()
      break
    case 'page':
      state.searchData['pageIndex'] = data.data
      state.searchData['pageSize'] = state.table.pageSize
      listBmsConstPage(state.searchData)
      break
    case 'pageSize':
      state.searchData['pageIndex'] = state.table.pageIndex
      state.searchData['pageSize'] = data.data
      state.table.pageSize = data.data
      listBmsConstPage(state.searchData)
      break
    case 'relation':
      state.visible = true
      state.row = data.data
      break
    case 'see':
      router.push({
        path: '/room/see-room', query: {
          id: data.data.id, dictionary: data.data.dictionaryCode, code: data.data.constCode
        }
      })
      break
    case 'edit':
      router.push({
        path: '/room/edit-room', query: {
          id: data.data.id, dictionary: data.data.dictionaryCode, code: data.data.constCode
        }
      })
      break
    case 'delete':
      break
    default:
      console.log('callBack', data)
      break
  }
}

const currentChange = (selectedKeys: any, info: any) => {
  if (selectedKeys.constCode === 'storey') {
    listBmsConstPage();
  } else if (selectedKeys.dictionaryCode === 'floor') {
    listBmsConstPage({
      parentCode: selectedKeys.constCode, constName: '', pageIndex: 1, pageSize: 15,
      dictionaryCode: 'room'
    });
  }
}

const listFindByBmsConstVo = () => {
  listFindByBmsConstVoApi({dictionaryCodeList: ['storey', 'floor']}).then((data: any) => {
    state.treeData.forEach((tree: any) => {
      let storeyList = data.filter(({dictionaryCode = ''}) => dictionaryCode === tree.constCode)
      tree.children = storeyList
      storeyList.forEach((storey: any) => {
        const floorList = data.filter(({parentCode = ''}) => parentCode === storey.constCode)
        storey.children = floorList
      })
    })
    console.log('state.treeData', state.treeData)
  })
}

const listBmsConstPage = (data = {
  dictionaryCode: 'storey',
  parentCode: '',
  constName: '',
  pageIndex: 1,
  pageSize: 15
}) => {
  listBmsConstPageApi(data).then((res: any) => {
    state.data = res.data
    state.table.total = res.total
    console.log('listFindByBmsConstVo', res)
  })
}

</script>